<template>
    <view class="uni-table-scroll" :class="{ 'table--border': border, 'border-none': !noData }">
        <!-- #ifdef H5 -->
        <table
            class="uni-table"
            border="0"
            cellpadding="0"
            cellspacing="0"
            :class="{ 'table--stripe': stripe }"
            :style="{ 'min-width': minWidth + 'px' }"
        >
            <slot></slot>
            <tr v-if="noData" class="uni-table-loading">
                <td class="uni-table-text" :class="{ 'empty-border': border }">{{ emptyText }}</td>
            </tr>
            <view v-if="loading" class="uni-table-mask" :class="{ 'empty-border': border }"
                ><div class="uni-table--loader"></div
            ></view>
        </table>
        <!-- #endif -->
        <!-- #ifndef H5 -->
        <view class="uni-table" :style="{ 'min-width': minWidth + 'px' }" :class="{ 'table--stripe': stripe }">
            <slot></slot>
            <view v-if="noData" class="uni-table-loading">
                <view class="uni-table-text" :class="{ 'empty-border': border }">{{ emptyText }}</view>
            </view>
            <view v-if="loading" class="uni-table-mask" :class="{ 'empty-border': border }"
                ><div class="uni-table--loader"></div
            ></view>
        </view>
        <!-- #endif -->
    </view>
</template>

<script>
/**
 * Table 表格
 * @description 用于展示多条结构类似的数据
 * @tutorial https://ext.dcloud.net.cn/plugin?id=3270
 * @property {Boolean} 	border 				是否带有纵向边框
 * @property {Boolean} 	stripe 				是否显示斑马线
 * @property {Boolean} 	type 					是否开启多选
 * @property {String} 	emptyText 			空数据时显示的文本内容
 * @property {Boolean} 	loading 			显示加载中
 * @event {Function} 	selection-change 	开启多选时，当选择项发生变化时会触发该事件
 */
export default {
    name: "UniTable",
    options: {
        // #ifdef MP-TOUTIAO
        virtualHost: false,
        // #endif
        // #ifndef MP-TOUTIAO
        virtualHost: true
        // #endif
    },
    props: {
        data: {
            type: Array,
            default() {
                return [];
            }
        },
        // 是否有竖线
        border: {
            type: Boolean,
            default: false
        },
        // 是否显示斑马线
        stripe: {
            type: Boolean,
            default: false
        },
        // 多选
        type: {
            type: String,
            default: ""
        },
        // 没有更多数据
        emptyText: {
            type: String,
            default: "没有更多数据"
        },
        loading: {
            type: Boolean,
            default: false
        },
        rowKey: {
            type: String,
            default: ""
        }
    },
    emits: ["selection-change"],
    data() {
        return {
            noData: true,
            minWidth: 0,
            multiTableHeads: []
        };
    },
    watch: {
        loading(val) {},
        data(newVal) {
            let theadChildren = this.theadChildren;
            let rowspan = 1;
            if (this.theadChildren) {
                rowspan = this.theadChildren.rowspan;
            }

            // this.trChildren.length - rowspan
            this.noData = false;
            // this.noData = newVal.length === 0
        }
    },
    created() {
        // 定义tr的实例数组
        this.trChildren = [];
        this.thChildren = [];
        this.theadChildren = null;
        this.backData = [];
        this.backIndexData = [];
    },

    methods: {
        isNodata() {
            let theadChildren = this.theadChildren;
            let rowspan = 1;
            if (this.theadChildren) {
                rowspan = this.theadChildren.rowspan;
            }
            this.noData = this.trChildren.length - rowspan <= 0;
        },
        /**
         * 选中所有
         */
        selectionAll() {
            let startIndex = 1;
            let theadChildren = this.theadChildren;
            if (!this.theadChildren) {
                theadChildren = this.trChildren[0];
            } else {
                startIndex = theadChildren.rowspan - 1;
            }
            let isHaveData = this.data && this.data.length > 0;
            theadChildren.checked = true;
            theadChildren.indeterminate = false;
            this.trChildren.forEach((item, index) => {
                if (!item.disabled) {
                    item.checked = true;
                    if (isHaveData && item.keyValue) {
                        const row = this.data.find((v) => v[this.rowKey] === item.keyValue);
                        if (!this.backData.find((v) => v[this.rowKey] === row[this.rowKey])) {
                            this.backData.push(row);
                        }
                    }
                    if (index > startIndex - 1 && this.backIndexData.indexOf(index - startIndex) === -1) {
                        this.backIndexData.push(index - startIndex);
                    }
                }
            });
            // this.backData = JSON.parse(JSON.stringify(this.data))
            this.$emit("selection-change", {
                detail: {
                    value: this.backData,
                    index: this.backIndexData
                }
            });
        },
        /**
         * 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
         */
        toggleRowSelection(row, selected) {
            // if (!this.theadChildren) return
            row = [].concat(row);

            this.trChildren.forEach((item, index) => {
                // if (item.keyValue) {

                const select = row.findIndex((v) => {
                    //
                    if (typeof v === "number") {
                        return v === index - 1;
                    } else {
                        return v[this.rowKey] === item.keyValue;
                    }
                });
                let ischeck = item.checked;
                if (select !== -1) {
                    if (typeof selected === "boolean") {
                        item.checked = selected;
                    } else {
                        item.checked = !item.checked;
                    }
                    if (ischeck !== item.checked) {
                        this.check(item.rowData || item, item.checked, item.rowData ? item.keyValue : null, true);
                    }
                }
                // }
            });
            this.$emit("selection-change", {
                detail: {
                    value: this.backData,
                    index: this.backIndexData
                }
            });
        },

        /**
         * 用于多选表格，清空用户的选择
         */
        clearSelection() {
            let theadChildren = this.theadChildren;
            if (!this.theadChildren) {
                theadChildren = this.trChildren[0];
            }
            // if (!this.theadChildren) return
            theadChildren.checked = false;
            theadChildren.indeterminate = false;
            this.trChildren.forEach((item) => {
                // if (item.keyValue) {
                item.checked = false;
                // }
            });
            this.backData = [];
            this.backIndexData = [];
            this.$emit("selection-change", {
                detail: {
                    value: [],
                    index: []
                }
            });
        },
        /**
         * 用于多选表格，切换所有行的选中状态
         */
        toggleAllSelection() {
            let list = [];
            let startIndex = 1;
            let theadChildren = this.theadChildren;
            if (!this.theadChildren) {
                theadChildren = this.trChildren[0];
            } else {
                startIndex = theadChildren.rowspan - 1;
            }
            this.trChildren.forEach((item, index) => {
                if (!item.disabled) {
                    if (index > startIndex - 1) {
                        list.push(index - startIndex);
                    }
                }
            });
            this.toggleRowSelection(list);
        },

        /**
         * 选中\取消选中
         * @param {Object} child
         * @param {Object} check
         * @param {Object} rowValue
         */
        check(child, check, keyValue, emit) {
            let theadChildren = this.theadChildren;
            if (!this.theadChildren) {
                theadChildren = this.trChildren[0];
            }

            let childDomIndex = this.trChildren.findIndex((item, index) => child === item);
            if (childDomIndex < 0) {
                childDomIndex = this.data.findIndex((v) => v[this.rowKey] === keyValue) + 1;
            }
            const dataLen = this.trChildren.filter((v) => !v.disabled && v.keyValue).length;
            if (childDomIndex === 0) {
                check ? this.selectionAll() : this.clearSelection();
                return;
            }

            if (check) {
                if (keyValue) {
                    this.backData.push(child);
                }
                this.backIndexData.push(childDomIndex - 1);
            } else {
                const index = this.backData.findIndex((v) => v[this.rowKey] === keyValue);
                const idx = this.backIndexData.findIndex((item) => item === childDomIndex - 1);
                if (keyValue) {
                    this.backData.splice(index, 1);
                }
                this.backIndexData.splice(idx, 1);
            }

            const domCheckAll = this.trChildren.find((item, index) => index > 0 && !item.checked && !item.disabled);
            if (!domCheckAll) {
                theadChildren.indeterminate = false;
                theadChildren.checked = true;
            } else {
                theadChildren.indeterminate = true;
                theadChildren.checked = false;
            }

            if (this.backIndexData.length === 0) {
                theadChildren.indeterminate = false;
            }

            if (!emit) {
                this.$emit("selection-change", {
                    detail: {
                        value: this.backData,
                        index: this.backIndexData
                    }
                });
            }
        }
    }
};
</script>

<style lang="scss">
$border-color: #ebeef5;

.uni-table-scroll {
    width: 100%;
    /* #ifndef APP-NVUE */
    overflow-x: auto;
    /* #endif */
}

.uni-table {
    position: relative;
    width: 100%;
    border-radius: 5px;
    // box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    /* #ifndef APP-NVUE */
    box-sizing: border-box;
    display: table;
    overflow-x: auto;
    ::v-deep .uni-table-tr:nth-child(n + 2) {
        &:hover {
            background-color: #f5f7fa;
        }
    }
    ::v-deep .uni-table-thead {
        .uni-table-tr {
            // background-color: #f5f7fa;
            &:hover {
                background-color: #fafafa;
            }
        }
    }
    /* #endif */
}

.table--border {
    border: 1px $border-color solid;
    border-right: none;
}

.border-none {
    /* #ifndef APP-NVUE */
    border-bottom: none;
    /* #endif */
}

.table--stripe {
    /* #ifndef APP-NVUE */
    ::v-deep .uni-table-tr:nth-child(2n + 3) {
        background-color: #fafafa;
    }
    /* #endif */
}

/* 表格加载、无数据样式 */
.uni-table-loading {
    position: relative;
    /* #ifndef APP-NVUE */
    display: table-row;
    /* #endif */
    height: 50px;
    line-height: 50px;
    overflow: hidden;
    box-sizing: border-box;
}
.empty-border {
    border-right: 1px $border-color solid;
}
.uni-table-text {
    position: absolute;
    right: 0;
    left: 0;
    text-align: center;
    font-size: 14px;
    color: #999;
}

.uni-table-mask {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 99;
    /* #ifndef APP-NVUE */
    display: flex;
    margin: auto;
    transition: all 0.5s;
    /* #endif */
    justify-content: center;
    align-items: center;
}

.uni-table--loader {
    width: 30px;
    height: 30px;
    border: 2px solid #aaa;
    // border-bottom-color: transparent;
    border-radius: 50%;
    /* #ifndef APP-NVUE */
    animation: 2s uni-table--loader linear infinite;
    /* #endif */
    position: relative;
}

@keyframes uni-table--loader {
    0% {
        transform: rotate(360deg);
    }

    10% {
        border-left-color: transparent;
    }

    20% {
        border-bottom-color: transparent;
    }

    30% {
        border-right-color: transparent;
    }

    40% {
        border-top-color: transparent;
    }

    50% {
        transform: rotate(0deg);
    }

    60% {
        border-top-color: transparent;
    }

    70% {
        border-left-color: transparent;
    }

    80% {
        border-bottom-color: transparent;
    }

    90% {
        border-right-color: transparent;
    }

    100% {
        transform: rotate(-360deg);
    }
}
</style>
